<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    var websocket;
    if (window.WebSocket) {
        websocket = new WebSocket("ws://localhost:8888/ws");
        websocket.onmessage = function (event) {
            var respMessage = document.getElementById("respMessage");
            respMessage.value = respMessage.value + "\n" + event.data;
        }
        websocket.onclose = function (event) {
            var respMessage = document.getElementById("respMessage");
            respMessage.value = respMessage.value + "\n断开连接";
        }
        websocket.onopen = function (event) {
            var respMessage = document.getElementById("respMessage");
            respMessage.value = "建立连接";
        }
    } else {
        alert("浏览器不支持websocket")
    }

    function sendMsg(msg) {
        if (window.WebSocket) {
            if (websocket.readyState == WebSocket.OPEN) {
                websocket.send(msg);
            }
        } else {
            return;
        }
    }
</script>
<body>
<form onsubmit="return false">
    <textarea style="width: 300px; height: 200px;" name="message"></textarea>
    <input type="button" onclick="sendMsg(this.form.message.value)" value="发送"><br>
    <h3>信息</h3>
    <textarea style="width: 300px; height: 200px;" id="respMessage"></textarea>
    <input type="button" value="清空" onclick="javascript:document.getElementById('respMessage').value = ''">
</form>
</body>
</html>